<template>
	<el-dialog v-model="visible" title="值域数据" :close-on-click-modal="false">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px" disabled>
			<el-form-item label="英文名称" prop="engName" label-width="auto">
				<el-input v-model="dataForm.engName" placeholder="英文名称"></el-input>
			</el-form-item>
			<el-form-item label="中文名称" prop="cnName" label-width="auto">
				<el-input v-model="dataForm.cnName" placeholder="中文名称"></el-input>
			</el-form-item>
			<el-form-item label="来源文件" prop="sourceFile" label-width="auto">
				<el-input v-model="dataForm.sourceFile" placeholder="来源文件"></el-input>
			</el-form-item>
			<el-form-item label="来源标识符" prop="sourceIdentifier" label-width="auto">
				<el-input v-model="dataForm.sourceIdentifier" placeholder="来源标识符"></el-input>
			</el-form-item>
			<el-form-item label="标准类型" prop="type" label-width="auto">
				<fast-select v-model="dataForm.type" disabled dict-type="standard_type" placeholder="标准类型" clearable></fast-select>
			</el-form-item>
			<el-form-item label="描述" prop="note" label-width="auto">
				<el-input type="textarea" :rows="3" v-model="dataForm.note" placeholder="描述"></el-input>
			</el-form-item>
		</el-form>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.dataId" placeholder="请输入值"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="state.queryForm.dataName" placeholder="请输入值含义"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" max-height="450px">
			<el-table-column prop="dataId" label="值" header-align="center" align="center"></el-table-column>
			<el-table-column prop="dataName" label="值含义" header-align="center" align="center"></el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<template #footer>
			<el-button @click="visible = false">关闭</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useStandardApi } from '@/api/data-governance/dataStandard'

const visible = ref(false)
const state: IHooksOptions = reactive({
	createdIsNeed: false,
	dataListUrl: '/data-governance/standard-code/page',
	queryForm: {}
})

const dataRules = ref({})
const dataForm = ref({})

const init = (standardId: any) => {
	visible.value = true
	state.queryForm.standardId = standardId
	getDataList()

	useStandardApi(standardId).then(res => {
		dataForm.value = res.data
	})
}

defineExpose({
	init
})

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>
